<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <common-head></common-head>
  </div>
  <script src="./vue.js"></script>
  <script>
    // 创建组件的class VueComponent
    Vue.component('CommonHead', {
      render: createElement=> {
        /* 
          createElement这个函数 用于 生成虚拟dom节点
            参数1 标签名
            参数2 各种属性 对象
              {
                class定义 类
                style定义 内联样式
              }
          render 函数 return 出当前组件的 虚拟dom

        */
       return createElement(
         'div',
         {
           class: {
             a: true,
             b: false
           },
           style: {
             color: 'red'
           },
           attrs: {
             id: 'box'
           }
         },
         [
           createElement('p', {class:['op']}, ['你是p']),
           createElement('span', {}, ['你是span']),
           '这是div文本内容'
         ]
       )
      }
    })
    const vm = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>